<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/jquery-3.2.1.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/index.js"></script>

		<title>总分馆文化地图</title>
		<style type="text/css">
			body,html{width: 100%;height: 100%;overflow: hidden;background: rgba(1,12,29,.5);font-size:0.16rem;}
			.wrap{
				/*margin: calc((100vh - 46.04166vw) / 2) auto 0;*/
				width: 5rem;
				height:3rem;
				background: url(img/alert-bg.png);
				background-size: 100% 100%;
				/*border: 1px solid transparent;*/
				margin:0.1rem 0.1rem 0 0.13rem;
				box-sizing: border-box;
			}
			.map{
				/*top: -.7rem;*/
				position: relative;
				width: 3rem;
				height: 2.5rem;
				background: url(img/map.png);
				background-size: 100% 100%;
				margin-left:0.8rem;
			}
			.text{
				position: absolute;
				bottom: 0.18rem;
				line-height: 1;
				left: -0.03rem;
				color: #fff;
				font-weight: bold;
				width: 100%;
				text-align: center;
				font-size: 0.14rem;
			}
			/*.map_site div img{width: 1rem;}*/
			/*.pt_library img{height: 0.33rem;}*/
			/*.lj_library img{height: 0.19rem;}*/
			/*.yh_library img{height: 0.18rem;}*/
			/*.zl_library img{height: 0.53rem;}*/
			/*.xw_library img{height: 0.53rem;}*/
			/*.st_library img{height: 0.34rem;}*/
			/*.qc_library img{height: 0.38rem;}*/
			/*.ds_library img{height: 0.3rem;}*/
			/*.sh_library img{height: 0.33rem;}*/
			/*.total_library img{height: 0.35rem;}*/
			.module-title {font-weight:700;color:#fff;margin-bottom:0.18rem;}
			.module-title img{margin-right:0.1rem;width: 0.2rem;}

			.my_box{width: 5rem;height: 3.3rem;

			}
		</style>
	</head>
	<body>
	<div>
		<div class="my_box">
			<div class="module-title ycenterbox"><img src="img/listimg.png" /><span class="section_name" data-key="today_recom_str">总分馆文化地图</span></div>
			<div class="wrap">
				<div class="text">总分馆文化地图</div>
				<div class="map">
					<div class="title">惠阳区图书馆</div>
					<div class="total_library" style="display: block"><img src="img/惠阳区总.png" alt=""/><span class="total_number"></span></div>
					<div class="map_site">
						<div class="site sh_library"><img src="img/三和.png" alt=""/><span class="number sh_number"></span></div>
						<div class="site ds_library"><img src="img/淡水.png" alt=""/><span class="number ds_number"></span></div>
						<div class="site qc_library"><img src="img/秋长.png" alt=""/><span class="number qc_number"></span></div>
						<div class="site st_library"><img src="img/沙田.png" alt=""/><span class="number st_number"></span></div>
						<div class="site xw_library"><img src="img/新圩.png" alt=""/><span class="number xw_number"></span></div>
						<div class="site zl_library"><img src="img/镇隆.png" alt=""/><span class="number zl_number"></span></div>
						<div class="site yh_library"><img src="img/永湖.png" alt=""/><span class="number yh_number"></span></div>
						<div class="site lj_library"><img src="img/良井.png" alt=""/><span class="number lj_number"></span></div>
						<div class="site pt_library"><img src="img/平潭.png" alt=""/><span class="number pt_number"></span></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</body>
	<script>
		window.onload = function(){
			getRem(500,100);
			document.body.style.display = "block";
		};
		window.onresize = function(){
			getRem(500,100)
		};
		function getRem(pwidth,prem){
			var html = document.getElementsByTagName("html")[0];
			var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
			html.style.fontSize = oWidth/pwidth*prem + "px";
			console.log(oWidth/pwidth*prem + "px")
		}
	</script>
</html>
